<template>
  <!-- 
    文档：https://developer.mozilla.org/zh-CN/docs/Web/API/HTML_Drag_and_Drop_API/Drag_operations 
    
    除了图像、链接和选择的文本默认的可拖拽行为之外，其他元素在默认情况下是不可拖拽的。
    想要其他元素可以拖拽：
      1. 将想要拖拽的元素的 draggable 属性设置成 "true"
  -->
  <div class="material" draggable="true" @dragstart="handleDragStart">
    <img :src="image" :alt="material.packageName" class="material-img" />
    <span>{{ material.packageName }}</span>
  </div>
</template>

<script lang="ts" setup>
import { fetchImage } from "@/materials";

defineOptions({
  name: "LibraryItem",
});

const props = defineProps({
  material: {
    type: Object,
    required: true,
  },
});

const image = "http://localhost:5174" + fetchImage(props.material.image);

// 拖拽开始事件
const handleDragStart = (event: DragEvent) => {
  // 1. 修改拖拽生成图像
  // image 是一个图片地址
  // 创建 img DOM 元素
  const imageEl = new Image();
  imageEl.src = image;
  event.dataTransfer!.setDragImage(imageEl, 10, 10);
  // 2. 保存拖拽的数据（将来其他地方就能读取到）
  // 拖拽的数据只能是字符串
  event.dataTransfer!.setData(
    "application/json",
    JSON.stringify(props.material)
  );
  // 3. 拖拽效果 -> 只复制
  event.dataTransfer!.effectAllowed = "copy";
};
</script>

<style scoped lang="scss">
.material {
  box-sizing: border-box;
  width: 33.33%;
  height: 100px;
  border-right: 1px solid #edeff3;
  border-bottom: 1px solid #edeff3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
}

.material-img {
  width: 50px;
  height: 25px;
}
</style>
